<template>
    <Carousel        
         v-model="value3"
        :autoplay="setting.autoplay"
        :autoplay-speed="setting.autoplaySpeed"
        :dots="setting.dots"
        :height="setting.height"
        :radius-dot="setting.radiusDot"
        :trigger="setting.trigger"
        :arrow="setting.arrow">
        <CarouselItem v-for="item in carousel">
                <a :style="{backgroundImage:'url('+item.url+')', height:height+'px', display:'block', cursor:'pointer'}"  class="bg" :href="item.urls"></a>
        </CarouselItem>

    </Carousel>
</template>
<script>
export default {
    props:{
        carouselImgs: {
            type: Array
        },
        height:{
            type:Number
        }
    },
    data () {
        return {
            value3:0,
            setting: {
                autoplay: true,
                height:this.height,
                autoplaySpeed: 5000,
                dots: 'inside',
                radiusDot: false,
                trigger: 'click',
                arrow: 'hover'
            },
            default: {
                topImgs: [
                    {
                        url:"",
                        urls:'#'
                    },
                    {
                        url:"",
                        urls:'#'
                    },
                    {
                        url:"",
                         urls:'#'
                    },
                ],
                AdImgs: [
                    {
                        url:"",
                        urls:'#'
                    },
                    {
                        url:"",
                        urls:'#'
                    }
                ],
            },
        }
    },
    computed: {
        carousel() {
            var carousel = [];
            if(this.carouselImgs.length == 0){carousel = this.default.topImgs;}
            else{
                for(var i = 0; i < this.carouselImgs.length;i++){
                    for(var j = 0; j < this.carouselImgs[i].logo.length;j++){      
                        var urls ={urls: this.carouselImgs[i].url};
                        var obj = Object.assign({},this.carouselImgs[i].logo[j],urls); 
                        carousel.push(obj);
                    }
                }
            }
            return carousel;
        }
    }
}
</script>
<style scoped>
.bg{
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
}
</style>